<template>
  <Modal v-model="showItPop" width="31" :closable="false" class-name="vertical-center-modal">
    <div slot="header"></div>
    <div class="content-sty" id="myImage">
      <img src="../images/show_it_img.png" class="poster-bg" alt="">
      <div class="month-text">{{ getMonth() }} Promotion Performance Ranking</div>
      <div :class="(obj.rank < 999 && obj.rank != 0) ? 'small-text' : 'current-size'">{{ obj.rank }}</div>
      <div class="than-text">{{ obj.outperformedPercent }}%</div>
      <div class="flex-text">
        <div class="invite-num">{{ obj.orderUsers }}</div>
        <div class="bonus-total">{{ userCurrency.currencySymbol }} {{ obj.totalBonus }}</div>
      </div>
    </div>
    <div slot="footer" class="handle-sty">
      <div class="save-btn" @click="saveMet()">Click & Download</div>
    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex";
import html2canvas from '@/common/html2canvas';
export default {
  data() {
    return {
      showItPop: false,
      obj: {}
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    getMonth() {
      // 创建 Date 对象
      const date = new Date();
      // 获取当前月份的数字（0 - 11）
      const monthIndex = date.getMonth();
      // 定义英文月份数组
      const months = [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'
      ];
      // 获取对应的英文月份名称
      return months[monthIndex];
    },
    open(obj) {
      this.obj = obj;
      this.showItPop = true;
    },
    saveMet() {
      setTimeout(() => {
        // 获取要截图的元素
        const element = document.querySelector("#myImage");
        // 获取设备的像素比
        const scale = window.devicePixelRatio || 1;
        // 设置 html2canvas 的配置选项
        const options = {
          // 设置缩放比例，提高分辨率
          scale: scale * 2,
          // 将 backgroundColor 设置为 null
          backgroundColor: null,
          // 允许跨域图像
          useCORS: true
        };
        // 设置 html2canvas 的配置选项，将 backgroundColor 设置为 null
        html2canvas(element, options, { backgroundColor: null }).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png');
          // 创建一个临时的 a 标签用于触发下载
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = 'image.png';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  background-color: transparent;
  box-shadow: none;
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 0;
  }

  .ivu-modal-body {
    padding: 0;
  }

  .ivu-modal-footer {
    border: none;
    padding: 0;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .content-sty {
    text-align: center;
    position: relative;

    .current-size {
      font-weight: 500;
      font-size: 32px;
      color: #FED530;
      line-height: 30px;
      position: absolute;
      top: 180px;
      right: 44px;
    }

    .small-text {
      font-weight: 500;
      font-size: 32px;
      color: #FED530;
      line-height: 30px;
      position: absolute;
      top: 180px;
      right: 90px;
    }

    .than-text {
      font-weight: 600;
      font-size: 30px;
      color: #6F58FF;
      line-height: 35px;
      position: absolute;
      top: 410px;
      right: 108px;
    }

    .flex-text {
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 42px;

      .invite-num {
        width: 300px;
        text-align: center;
        font-weight: 600;
        font-size: 36px;
        color: #FD9B00;
        line-height: 42px;
      }

      .bonus-total {
        width: 300px;
        text-align: center;
        font-weight: 600;
        font-size: 36px;
        color: #FD9B00;
        line-height: 42px;
      }
    }

    .poster-bg {
      width: 600px;
    }

    .month-text {
      width: 285px;
      height: 72px;
      text-align: left;
      font-weight: 400;
      font-size: 26px;
      color: #FFFFFF;
      line-height: 30px;
      position: absolute;
      top: 250px;
      left: 260px;
    }
  }

  .handle-sty {
    text-align: center;

    .save-btn {
      display: inline-block;
      padding: 16px 32px;
      border-radius: 35px;
      background: rgba(0, 0, 0, 0.6);
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 28px;
      cursor: pointer;
      margin-top: 32px;
    }
  }
}
</style>
